<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>期刊分析</title>
    <!--<script type="text/javascript" src="/libms/lib/js/jquery-3.2.1.min.js"></script>-->
    <!--<script type="text/javascript" src="/libms/lib/js/bootstrap.min.js"></script>-->

    <!--<script src="/libms/lib/layui/layui.js" type="text/javascript"></script>-->
    <!--<link rel="stylesheet" href="/libms/lib/layui/css/layui.css">-->
    <!--<link rel="stylesheet" href="/libms/lib/css/bootstrap.min.css">-->

    <script type="text/javascript" src="lib/highcharts/highcharts.js"></script>

</head>
<body>
    <div class="container">
        <form class="layui-form" action="">
            <div class="layui-form-item">
                <label class="layui-form-label" style="width: 90px;">分析类型</label>
                <div class="layui-input-block">
                    <input type="radio" name="type" value="1" title="出版社" lay-filter="switchTest" checked>
                    <input type="radio" name="type" value="2" title="类型" lay-filter="switchTest">
                    <input type="radio" name="type" value="3" title="名称" lay-filter="switchTest">
                </div>
            </div>
        </form>
        <button class="btn btn-default" id="exportexcel">导出excel</button>
        <button class="btn btn-primary" id="zhutu">显示柱状图</button>
        <button class="btn btn-info" id="zhexiantu">显示折线图</button>
        <button class="btn btn-success" id="bingyu">显示饼状图</button>
        <table class="layui-table" id="qkfxt" lay-filter="qkfxt">

        </table>

       
    <div id="hc"></div>
    </div>
    
</body>
</html>
<script>
    var table;
    layui.use('form', function(){
        var form = layui.form;
        form.render();
        form.on('radio()', function(data){
            console.log(data.elem); //得到radio原始DOM对象
            console.log(data.value); //被点击的radio的value值
        });
    });
    layui.use('table', function() {
        table = layui.table;
        table.render({
            elem: '#qkfxt',
            url:'qkfx.json',
            // id:"qkfxtb",
            cols: [[
                {field:'publisher',  title: '出版社'},
                {field:'num',  title: '借阅次数', },
            ]]


        });
    });
$("#exportexcel").click(function(event) {
    console.log(table.cache.qkfxt);
    $.data2excel({
        name: "期刊资料分析",
        filename:"期刊资料分析",
        content:[
             {
                  "publisher":"黑龙江省出版",
                  "num":10


                }, {
                  "publisher":"黑龙江省出版",
                  "num":10


                }, {
                  "publisher":"黑龙江省出版",
                  "num":10


                }, {
                  "publisher":"黑龙江省出版",
                  "num":10


                }, {
                  "publisher":"黑龙江省出版",
                  "num":10


                }, {
                  "publisher":"黑龙江省出版",
                  "num":10


                }, {
                  "publisher":"黑龙江省出版",
                  "num":10


                }, {
                  "publisher":"黑龙江省出版",
                  "num":10


                }, {
                  "publisher":"黑龙江省出版",
                  "num":10


                }
        ],
        title:[
            "出版社","数量"
        ],
        fileds:["publisher", "num"],
    })
});
$("#zhutu").click(function(event) {
    createch ('column')
});
$("#zhexiantu").click(function(event) {
     createch ('line')
});
function createch (type) {
var chart = Highcharts.chart('hc', {
    chart: {
        type: type
        // type: 'line'
        // type: 'pie'
    },
    title: {
        text: '出版社统计情况'
    },
    subtitle: {
        // text: '数据来源：thesolarfoundation.com'
    },
    yAxis: {
        title: {
            text: '期刊数量'
        }
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle'
    },
    xAxis: {
            categories: ['黑龙江出版社', '机械工业出版社', '电子工业出版社', '清华大学出版社', '长江出版社'],
            tickLength:10
        },
    series: [{
        name: '期刊数量',
        data: [11744, 17722, 16005, 19771, 20185]
    }],
    responsive: {
        rules: [{
            condition: {
                maxWidth: 500
            },
            chartOptions: {
                legend: {
                    layout: 'horizontal',
                    align: 'center',
                    verticalAlign: 'bottom'
                }
            }
        }]
    }
});
}


</script>